react扬帆起航之基本环境搭建

create-react-app-typescript

自从使用了Angular之后，从此入了Typescript的坑。当再次选择react时，就选择了基于react官方脚手架构建工具create-react-app的ts实现，即create-react-app-typescript。

使用起来非常简单，几个命令即可:

# create-react-app
npm i -g create-react-app
# 构建项目
create-react-app react-example --scripts-version=react-scripts-ts
# 启动
cd react-example
npm start

OK, done!

react-app-rewired

react-app-rewired是一个对create-react-app进行自定义配置的社区解决方案，可以在不 eject 的情条件下对create-react-app进行高级配置。

npm i react-app-rewired -D

然后在package.json更改启动配置，更改为：

/* package.json */
"scripts": {
  "start": "react-app-rewired start --scripts-version react-scripts-ts",
  "build": "react-app-rewired build --scripts-version react-scripts-ts",
  "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
}

然后在项目的根目录在创建 config-overrides.js，在这里，通过配置实现以下功能：

• antd按需加载以及自定义主题
• 支持less并实现less-modules
• 低版本浏览器自动添加css前缀

// config-overrides.js
const tsImportPluginFactory = require('ts-import-plugin')
const { getLoader } = require("react-app-rewired");
const rewireLess = require('react-app-rewire-less');
const fs = require('fs');
const path = require('path');

module.exports = function override(config, env) {

  const tsLoader = getLoader(
    config.module.rules,
    rule =>
      rule.loader &&
      typeof rule.loader === 'string' &&
      rule.loader.includes('ts-loader')
  );

  // ts-import-plugin
  tsLoader.options = {
    getCustomTransformers: () => ({
      before: [tsImportPluginFactory({
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'true',
      })]
    })
  };

  // antd自定义主题
  config = rewireLess.withLoaderOptions({
    modifyVars: { "@primary-color": "#1DA57A" },
  })(config, env);

  // less-modules/自动添加css前缀
  config.module.rules[1].oneOf.unshift(
    {
      test: /\.less$/,
      exclude: /node_modules|antd\.less/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            minimize: true,
            modules: true,
            localIdentName: '[local]___[hash:base64:5]'
          }
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            ident: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9'
                ],
                flexbox: 'no-2009'
              })
            ]
          }
        },
        {
          loader: require.resolve('less-loader')
        }
      ]
    }
  );

  return config;
}

至此，关于基本环境搭建的内容完毕。

---

react扬帆启航专栏分享的时我个人学习与实践react过程中的一些历程，希望借此专栏与大家共同探讨react相关的技术，以求进步。